<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex Demo</title>
</head>

<body class="container">
    <!-- flex 容器定义 -->
    <div class="main-container">
        <div class="content-container">
            <p>flex 容器
                <pre>display:flex</pre>
            </p>
            <div class="flex-container"></div>
        </div>
    </div>
    <br>
    <!-- flex 容器元素在主轴上的方向 -->
    <div class="main-container">
        <div class="content-container">
            <p>主轴方向
                <pre>flex-direction: row</pre>
            </p>
            <div class="flex-container">
                <div class="flex-main-axis-direction">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
        <div class="content-container">
            <p>主轴方向
                <pre>flex-direction: row-reverse</pre>
            </p>
            <div class="flex-container">
                <div class="flex-main-axis-reverse-direction">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
        <div class="content-container">
            <p>主轴方向
                <pre>flex-direction: column</pre>
            </p>
            <div class="flex-container">
                <div class="flex-cross-axis-direction">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
        <div class="content-container">
            <p>主轴方向
                <pre>flex-direction: column-reverse</pre>
            </p>
            <div class="flex-container">
                <div class="flex-cross-axis-reverse-direction">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <!-- flex 容器在主轴上的排列方式-->
    <div class="main-container">
        <div class="content-container">
            <p>主轴的排列
                <pre>flex-wrap: nowrap</pre>
                可使得主轴上的元素不折行
            </p>
            <div class="flex-container">
                <div class="flex-wrap-nowarp">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
        <div class="content-container">
            <p>主轴的排列
                <pre>flex-wrap: wrap</pre>
                可使得主轴上的元素折行
            </p>
            <div class="flex-container">
                <div class="flex-wrap-warp">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
        <div class="content-container">
            <p>主轴的排列
                <pre>flex-wrap: wrap-reverse</pre>
                可使得主轴上的元素反向折行
            </p>
            <div class="flex-container">
                <div class="flex-wrap-wrap-reverse">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <!-- flex 容器主轴上方向与排列方式的组合 -->
    <div class="main-container">
        <div class="content-container">
            <p>复合属性
                <pre>flex-flow = flex-drection + flex-wrap</pre>
                flex-flow相当于规定了flex布局的“工作流(flow)”
                <pre>flex-flow: row nowrap;</pre>
            </p>
            <div class="flex-container">
                <div class="flex-flow">
                    <div>元1</div>
                    <div>元2</div>
                    <div>元3</div>
                    <div>元4</div>
                    <div>元5</div>
                </div>
            </div>
        </div>
    </div>
    <!-- flex 容器中元素弹性收缩与放大 -->
    <div class="main-container">
        <div class="content-container">
            <p>
                当flex-wrap: nowrap;不折行时，容器宽度有剩余/不够分，弹性元素们该怎么“弹性”地伸缩应对
            </p>
            <p>
                这里针对上面两种场景，引入两个属性(需应用在弹性元素上)
            </p>
            <ul>
                <li>flex-shrink：缩小比例（容器宽度< 元素总宽度时如何收缩</li> <li>flex-grow：放大比例（容器宽度>元素总宽度时如何伸展）</li>
            </ul>
        </div>
    </div>
    <!-- flex 容器中元素弹性收缩
        
    -->
    <div class="main-container">
        <div class="content-container">
            <p>
                flex-shrink: 缩小比例
            </p>
            <p>
                下面样例是使用只是用display:flex的样式
            </p>
            <div class="flex-container">
                <div class="flex-shrink">
                    <div>50px</div>
                    <div>100px</div>
                    <div>120px</div>
                </div>
            </div>
        </div>
    </div>

</body>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .main-container {
        display: flex;
        flex-direction: row;
    }

    .content-container {
        display: flex;
        flex-direction: column;
        margin: 0 40px;
    }

    .flex-container {
        /* 声明这个容器是弹性容器 
        具有flex弹性布局的特性
        */
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        /* 注意：在使用这个的时候，纵轴将会自动伸缩 */
        flex-direction: column;
        background-color: aqua;
    }

    .flex-container .flex-main-axis-direction {
        flex-direction: row;
        display: flex;
    }

    .flex-container .flex-cross-axis-direction {
        flex-direction: column;
        display: flex;
    }

    .flex-container .flex-main-axis-reverse-direction {
        flex-direction: row-reverse;
        display: flex;
    }

    .flex-container .flex-cross-axis-reverse-direction {
        flex-direction: column-reverse;
        display: flex;
    }

    .flex-container .flex-wrap-nowarp {
        display: flex;
        flex-wrap: nowrap
    }

    .flex-container .flex-wrap-warp {
        display: flex;
        flex-wrap: wrap
    }

    .flex-container .flex-wrap-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse
    }

    .flex-container .flex-flow {
        display: flex;
        flex-flow: row nowrap;
    }

    .flex-container .flex-shrink {
        display: flex;
        flex-wrap: nowrap;
    }

    .flex-container .flex-shrink div:nth-child(1) {
        width: 50px;
        border: 1px solid #000;
    }

    .flex-container .flex-shrink div:nth-child(2) {
        width: 100px;
        border: 1px solid #000;
    }

    .flex-container .flex-shrink div:nth-last-child(1) {
        width: 120px;
        border: 1px solid #000;
    }

    .flex-container .flex-shrink-wrap {
        display: flex;
        flex-flow: row wrap;
    }

    .flex-container .flex-main-axis-direction div,
    .flex-container .flex-cross-axis-direction div,
    .flex-container .flex-main-axis-reverse-direction div,
    .flex-container .flex-cross-axis-reverse-direction div,
    .flex-container .flex-wrap-nowarp div,
    .flex-container .flex-wrap-warp div,
    .flex-container .flex-wrap-wrap-reverse div,
    .flex-container .flex-flow div,
    .flex-container .flex-shrink div,
    .flex-container .flex-shrink-wrap div {
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>

</html>